<template>
	<view class="content">
		<uni-icons type="browse" size="30"></uni-icons>
		<image class="logo" src="/static/logo/logo.png" @click="open"></image>

		<text class="">主store取值：this.$store.state.自定义名 => \n {{this.$store.state.apitoken}}\n\n</text>
		<text class="">子store取值：this.$store.state.module1.自定义名 =>
			{{this.$store.state.module1.mytest2}}\n</text>

		<text class="">store action 调用(token)：{{ctoken}}\n</text>

		<button @click="open">打开弹窗</button>
		<button @click="updateStore">修改全局store state</button>
		<button @click="updateSubStore">修改子store state</button>

		<button @click="myAction">调用主action</button>
		<button @click="mySubAction">调用子action</button>


		<uni-popup ref="popup" type="bottom" background-color="#fff"><label>底部弹出 Popup</label></uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex' //引入mapState

	export default {
		data() {
			return {
				title: 'Hello',
				// this.$store.state.ncovaBroad.ncovaBroad.ncovaInfo
				mystore: this.$store.state.apitoken,
				// 同步刷新需要通过computed实现
				token: this.$store.state.apitoken
			}
		},
		computed: {
			ctoken() {
				return this.$store.state.apitoken;
			},
		},

		onLoad() {

		},
		methods: {
			// this.$store.dispatch("module1/getNcovaInfo", {
			// 	name: "ncova", //名称
			// 	attribute: "dangerous" //属性
			// });

			updateStore() {
				this.$store.commit('setApiToken', 'New token value');
			},
			updateSubStore() {
				this.$store.commit('module1/setMytest2', '【New===】');
			},
			myAction() {
				this.$store.dispatch('getApiToken');
			},
			mySubAction() {
				this.$store.dispatch('module1/actSetMytest2', '【mod诶了】')
			},
			open() {
				this.$refs.popup.open('top')
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>